<template>
  <el-table
    ref="userTable"
    v-loading="userTableLoading"
    :data="tableData"
    border
    height="600px"
    style="width: 100%"
    @row-dblclick="UpdateCol"
  >
    <el-table-column
      fixed="left"
      align="center"
      type="selection"
      width="55"
    />
    <el-table-column
      label="序号"
      width="55"
      align="center"
    >
      <template slot-scope="scope">{{ scope.$index + 1 }}</template>
    </el-table-column>
    <el-table-column
      label="工号"
      sortable
      width="100"
      align="center"
    >
      <template slot-scope="scope">{{ scope.row.code }}</template>
    </el-table-column>
    <el-table-column
      label="用户名"
      width="100"
      align="center"
    >
      <template slot-scope="scope">{{ scope.row.name }}</template>
    </el-table-column>
    <el-table-column
      label="所属公司"
      width="120"
      align="center"
    >
      <template slot-scope="scope">{{ scope.row.company.name }}</template>
    </el-table-column>
    <el-table-column
      label="所属部门"
      width="120"
      align="center"
    >
      <template slot-scope="scope">{{ scope.row.department.name }}</template>
    </el-table-column>
    <el-table-column
      label="拥有角色"
      width="135"
      align="center"
    >
      <template slot-scope="scope"><span v-for="item in scope.row.roleList" :key="item.id">{{ item.name }}\</span></template>
    </el-table-column>
    <el-table-column
      label="职位"
      width="110"
      align="center"
    >
      <template slot-scope="scope">{{ scope.row.position.name }}</template>
    </el-table-column>
    <el-table-column
      label="性别"
      width="50"
      align="center"
    >
      <template slot-scope="scope">{{ scope.row.sex===0?'男':'女' }}</template>
    </el-table-column>
    <el-table-column
      label="生日"
      width="150"
      sortable
      align="center"
    >
      <template slot-scope="scope">{{ scope.row.birthday }}</template>
    </el-table-column>
    <el-table-column
      label="电话"
      width="130"
      align="center"
    >
      <template slot-scope="scope">{{ scope.row.tel }}</template>
    </el-table-column>
    <el-table-column
      label="状态"
      width="130"
      align="center"
    >
      <template slot-scope="scope">
        <el-tag
          v-if="scope.row.status === 1"
          type="success"
        >启用</el-tag>
        <el-tag v-else type="danger">停用</el-tag>
      </template>
    </el-table-column>
    <!--操作区-->
    <el-table-column
      fixed="right"
      align="center"
      label="操作"
      width="300"
    >
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="CopyCol(scope.row)"
        >复制</el-button>
        <el-button
          size="mini"
          @click="UpdateCol(scope.row)"
        >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="DeleteCol(scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'MainTable',
  props: {
    userTableLoading: {
      require: true,
      type: Boolean,
      default: () => {
        return false
      }
    },
    tableData: {
      require: true,
      type: Array,
      default: () => {
        return []
      }
    }
  },
  methods: {
    UpdateCol(row) {
      this.$emit('UpdateCol', row)
    },
    CopyCol(row) {
      this.$emit('CopyCol', row)
    },
    DeleteCol(row) {
      this.$emit('DeleteCol', row)
    }
  }
}
</script>

<style scoped lang="scss">

</style>
